<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Control Centre</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
:root {
  --bg-gradient: linear-gradient(145deg, #05060b, #001f3d);
  --card:rgba(15,20,30,0.9);
  --fg:#e6e6e6;
  --accent:#1592ff;
  --shadow:rgba(0,0,0,0.7);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Arial,sans-serif;
  background:var(--bg-gradient);
  color:var(--fg);
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:20px 0;
  overflow-y:auto;
  scroll-behavior:smooth;
}

/* Card */
.card{
  background:var(--card);
  border-radius:24px;
  width:380px;
  padding:28px;
  box-shadow:0 12px 28px var(--shadow);
  backdrop-filter:blur(10px);
  animation:fadeIn 0.4s ease-out;
}

/* Header */
.h{
  display:flex;
  justify-content:center;
  margin-bottom:22px;
  font-size:22px;
  font-weight:700;
  color:var(--accent);
  text-shadow:0 0 6px rgba(21,146,255,0.5);
}

/* Rows */
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 0;
  border-radius:14px;
  position:relative;
  margin-bottom:12px;
  background:rgba(25,30,45,0.5);
  transition:transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.row::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(21,146,255,0.05);
  filter:blur(10px);
  z-index:0;
}
.row:hover{
  transform:translateY(-2px);
  box-shadow:0 0 14px rgba(21,146,255,0.3);
  background:rgba(25,30,45,0.65);
}

/* Left section */
.left{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.icon{width:26px;height:26px;color:var(--accent)}
.label{font-size:16px;color:var(--fg);font-weight:500}

/* Switch toggle */
.switch{
  position:relative;width:56px;height:34px;cursor:pointer;z-index:1;
}
.switch input{opacity:0;width:0;height:0}
.slider{
  position:absolute;inset:0;border-radius:34px;
  background:#1a1f2b;transition:background .25s,box-shadow .25s;
  overflow:hidden;
}
.knob{
  position:absolute;left:4px;bottom:4px;width:26px;height:26px;border-radius:50%;
  background:#fff;transition:transform .25s,background .25s;
}
.switch input:checked + .slider{
  background:var(--accent);
  box-shadow:0 0 16px var(--accent);
}
.switch input:checked + .slider .knob{transform:translateX(22px);}
.slider::after{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  opacity:0;transform:scale(1.2);background:var(--accent);
}
.switch:active .slider::after{animation:ripple .3s ease}
@keyframes ripple{0%{opacity:.3;transform:scale(0.8)}100%{opacity:0;transform:scale(1.8)}}

/* New popup fallback */
.webui-popup {
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Arial,sans-serif;
}
</style>
</head>
<body>
<div class="card">
  <div class="h">Control Centre</div>

  <div class="row"><div class="left"><span class="material-icons icon">adb</span><div class="label">PIF Advanced</div></div><label class="switch"><input type="checkbox" id="advanced"><span class="slider"><span class="knob"></span></span></label></div>
  <div class="row"><div class="left"><span class="material-icons icon">shop</span><div class="label">Disable GMS Spoofing</div></div><label class="switch"><input type="checkbox" id="gms"><span class="slider"><span class="knob"></span></span></label></div>
  <div class="row"><div class="left"><span class="material-icons icon">shop</span><div class="label">Disable PlayStore Spoofing</div></div><label class="switch"><input type="checkbox" id="playstore"><span class="slider"><span class="knob"></span></span></label></div>
  <div class="row"><div class="left"><span class="material-icons icon">android</span><div class="label">Spoof Lineage Props</div></div><label class="switch"><input type="checkbox" id="NoLineageProp"><span class="slider"><span class="knob"></span></span></label></div>
  <div class="row"><div class="left"><span class="material-icons icon">android</span><div class="label">Override Lineage Props</div></div><label class="switch"><input type="checkbox" id="override"><span class="slider"><span class="knob"></span></span></label></div>
  <div class="row"><div class="left"><span class="material-icons icon">bug_report</span><div class="label">Spoof Debug Fingerprint</div></div><label class="switch"><input type="checkbox" id="nodebug"><span class="slider"><span class="knob"></span></span></label></div>
  <div class="row"><div class="left"><span class="material-icons icon">pest_control</span><div class="label">Spoof Debug Build</div></div><label class="switch"><input type="checkbox" id="build"><span class="slider"><span class="knob"></span></span></label></div>
  <div class="row"><div class="left"><span class="material-icons icon">verified</span><div class="label">Spoof Build Tag</div></div><label class="switch"><input type="checkbox" id="tag"><span class="slider"><span class="knob"></span></span></label></div>
  <div class="row"><div class="left"><span class="material-icons icon">lock</span><div class="label">Spoof Encryption</div></div><label class="switch"><input type="checkbox" id="encrypt"><span class="slider"><span class="knob"></span></span></label></div>
  <div class="row"><div class="left"><span class="material-icons icon">bolt</span><div class="label">Spoof Selinux</div></div><label class="switch"><input type="checkbox" id="selinux"><span class="slider"><span class="knob"></span></span></label></div>
  <div class="row"><div class="left"><span class="material-icons icon">healing</span><div class="label">Spoof Custom Recovery</div></div><label class="switch"><input type="checkbox" id="twrp"><span class="slider"><span class="knob"></span></span></label></div>
  <div class="row"><div class="left"><span class="material-icons icon">delete</span><div class="label">Nuke Gapp Logs</div></div><label class="switch"><input type="checkbox" id="gapps"><span class="slider"><span class="knob"></span></span></label></div>
  <div class="row"><div class="left"><span class="material-icons icon">delete</span><div class="label">Nuke Module Logs</div></div><label class="switch"><input type="checkbox" id="root"><span class="slider"><span class="knob"></span></span></label></div>
  <div class="row"><div class="left"><span class="material-icons icon">download</span><div class="label">Get Recommended Modules</div></div><label class="switch"><input type="checkbox" id="download"><span class="slider"><span class="knob"></span></span></label></div>
  <div class="row"><div class="left"><span class="material-icons icon">do_not_touch</span><div class="label">No Redirect</div></div><label class="switch"><input type="checkbox" id="noredirect"><span class="slider"><span class="knob"></span></span></label></div>
  <div class="row"><div class="left"><span class="material-icons icon">security</span><div class="label">Kill Switch</div></div><label class="switch"><input type="checkbox" id="safemode"><span class="slider"><span class="knob"></span></span></label></div>
</div>

<script>
const DIR="/data/adb/Box-Brain";
const FILES=["noredirect","safemode","advanced","gms","playstore","override","NoLineageProp","gapps","download","root","nodebug","encrypt","twrp","build","tag","selinux"];
const els=Object.fromEntries(FILES.map(f=>[f,document.getElementById(f)]));

const messages={
  noredirect:{on:"You won't be redirected",off:"Redirect enabled"},
  NoLineageProp:{on:"Disable if camera fails",off:"Lineage props unchanged"},
  playstore:{on:"Reboot to apply changes",off:"Do resetprop manually"},
  gms:{on:"Reboot to apply changes",off:"Do resetprop manually"},
  override:{on:"Click on action button",off:"Force props disabled"},
  safemode:{on:"Reboot to apply changes",off:"Only enable when something went wrong"},
  twrp:{on:"Reboot to apply changes",off:"Disabled"},
  encrypt:{on:"Fake storage encryption applied",off:"Disabled"},
  nodebug:{on:"Reboot to apply changes",off:"Disabled"},
  build:{on:"Reboot to apply changes",off:"Disabled"},
  tag:{on:"Reboot to apply changes",off:"Disabled"},
  gapps:{on:"Click on Action button",off:"Disabled"},
  download:{on:"Click on Action button",off:"Disabled"},
  root:{on:"Click on Action button",off:"Disabled"},
  advanced:{on:"Pro Mode enabled",off:"Default settings"},
  selinux:{on:"Reboot to apply changes",off:"Disabled"}
};

const exec = typeof ksu!=='undefined'&&ksu&&ksu.exec
  ? cmd=>ksu.exec(cmd)
  : (typeof Android!=='undefined'&&Android&&Android.exec ? cmd=>Android.exec(cmd) : ()=>'');

/* popup function */
function popup(msg,type="info") {
  try {
    if (typeof window.toast === "function") { window.toast(String(msg)); return; }
    if (window.kernelsu && typeof window.kernelsu.toast === "function") { window.kernelsu.toast(String(msg)); return; }
    if (typeof ksu === "object" && typeof ksu.toast === "function") { ksu.toast(String(msg)); return; }
  } catch {}

  const n=document.createElement("div");
  n.className="webui-popup";
  n.textContent=msg;

  const colors={ error:"#f44336", success:"#4caf50", info:"#1565c0", warn:"#ff8f00" };
  const bg=colors[type] || "#0099FF";

  Object.assign(n.style,{
    position:"fixed",top:"-70px",left:"50%",transform:"translateX(-50%)",
    background:bg,color:"#fff",padding:"0.8rem 1.2rem",borderRadius:"8px",
    boxShadow:"0 6px 18px rgba(0,0,0,0.35)",fontWeight:"600",zIndex:"99999",
    transition:"top 0.36s,opacity 0.36s",opacity:"0"
  });

  document.body.appendChild(n);
  requestAnimationFrame(()=>{ n.style.top="20px"; n.style.opacity="1"; });
  setTimeout(()=>{ n.style.top="-70px"; n.style.opacity="0"; setTimeout(()=>n.remove(),420); },2500);
}

function toggleFile(f,enable){
  if(enable){
    exec(`touch "${DIR}/${f}"`);
    popup(messages[f].on,"success");
  } else {
    exec(`rm -f "${DIR}/${f}"`);
    popup(messages[f].off,"error");
  }
}

function loadState(){
  FILES.forEach(f=>{
    els[f].checked = exec(`[ -f "${DIR}/${f}" ] && echo 1 || echo 0`).trim()==="1";
  });
}

FILES.forEach(f=>{
  els[f].addEventListener("change",()=>toggleFile(f,els[f].checked));
});

window.addEventListener("DOMContentLoaded",loadState);
</script>
</body>
</html>